<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boom客户管理系统</title>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<style>
    .el-header, .el-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        background-color: white;
        color: #333;
        text-align: center;
    }
    .el-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        background-color: white;
        color: #333;
        text-align: center;
    }
    .box-card{
        line-height: 30px;
    }
    body{
        margin: 0px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>
<body>
    <div id="content" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
        <el-container style="width: 90%;max-width: 700px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
            <el-header style="border-top-right-radius: 25px;border-top-left-radius: 25px;"><h1>Boom客户管理系统</h1></el-header>
    
            <el-main>
                <el-form ref="form" :model="form" label-width="80px" >
                    <el-form-item label="账号：">
                        <el-input  v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：">
                        <el-input @keyup.enter.native="login" v-model="form.passwd" type="password"></el-input>
                    </el-form-item>
                </el-form>
                <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                    <el-button style="max-width: 200px;" type="primary" round @click="login">立即登录</el-button>
                </div>
    
            </el-main>
            <el-footer style="border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;">SpringBoot-Boom客户管理系统 - power by xiaoxi</el-footer>
        </el-container>
    </div>
    
    <script>
        var app = new Vue({
            el: '#content',
            data: {
                form:{
                    username:"",
                    passwd:""
                }
            },
            mounted:function(){
    
            },
            methods:{
                login:function(){
                    axios.get('login',{
                        params: {
                            username:app.form.username,
                            password:app.form.passwd
                        }
                    })
                        .then(res => {
                            console.log('数据是:', res);
                            if(res.data.data){
                                this.$message({
                                    message: '登录成功！',
                                    type: 'success'
                                });
                                window.location.href="index.html";
                            }else{
                                this.$message.error({
                                    message: '登录失败！'
                                });
                            }
                        })
                        .catch((e) => {
                            console.log('获取数据失败');
                        });
                },
                goto:function(item){
                    window.open('upload.html?id='+item.id);
                },
            }
        })
    </script>
</body>
</html>